<template>
  <div>
    <Row :gutter="24">
      <Col span="7">
      <div>
        <Input v-width="250" type="text" v-model="keyWord" placeholder="请输入关键词" @on-enter="enterSearch" clearable
          @on-clear="enterSearch"></Input>
      </div>
      </Col>
      <Col span="12">
      <Button type="primary" @click="addData">新增</Button>
      </Col>
    </Row>
    <div style="margin-top:20px">
      <Table :columns="columns" :data="allData">
        <template slot-scope="{ row, index }" slot="action">
          <a style="margin-right: 5px" @click="editData(row)">编辑</a>
          <Divider type="vertical" />
          <a @click="deleteData(row)">删除</a>
        </template>
      </Table>
    </div>
    <div class="ivu-mt ivu-text-center">
      <Page show-total show-elevator show-sizer :total="total" :current.sync="pageParams.page"
        :page-size="pageParams.pageSize" :page-size-opts="pageOpts" @on-change="changePageSize"
        @on-page-size-change="formChangePage" />
    </div>
    <Modal v-model="modal" :title="modalStatus" :mask-closable="false" @on-cancel="cancel">
      <Form ref="formBox" :model="formBox" :rules="rules" :label-width="80">
        <FormItem prop="modResult" label="模式：">
          <RadioGroup v-model="formBox.modResult" @on-change="changeRadio">
            <Radio label="单次"></Radio>
            <Radio label="循环"></Radio>
          </RadioGroup>
        </FormItem>
        <FormItem prop="modDate" label="日期：">
          <dateView :isEditDate='isEditDate' ref="dateViews" @changeDate="changeDate" v-if="showOne"> </dateView>
          <DatePicker v-else type="date" style="width: 200px" v-model="formBox.modDate" placeholder="请选择日期">
          </DatePicker>
        </FormItem>
        <FormItem prop="content" label="内容：">
          <Input v-model="formBox.content" placeholder="请输入内容" style="width:400px" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="cancel">取消</Button>
        <Button type="primary" @click="submitParams" :loading="subLoading">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
  import { calendarReminderList, deleteCalendarReminder, SetCalendarReminder } from "@api/TApi"
  import dateView from "./dateView.vue"
  export default {
    components: { dateView },
    computed: {
      showOne() {
        return this.formBox.modResult === "循环"
      }
    },
    data() {
      const validateModDate = (rule, value, callback) => {
        if (this.showOne) {
          if (this.formBox.modDate1 === '') {
            callback(new Error('请选择时间'));
          } else {
            callback();
          }
        } else {
          if (this.formBox.modDate === '') {
            callback(new Error('请选择时间'));
          } else {
            callback();
          }
        }
      };
      const validateContent = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入内容'));
        } else {
          if (value.length > 15) {
            callback(new Error('字数超过15字'));
          } else {
            callback();
          }
        }
      };
      return {
        rules: {
          modDate: [
            { validator: validateModDate, trigger: 'blur' }
          ],
          content: [
            { validator: validateContent, trigger: 'blur' }
          ],
        },
        keyWord: "",
        modalStatus: "",
        pageParams: {
          page: 1,
          pageSize: 10,
        },
        formBox: {
          modResult: "单次",
          modDate: "",
          modDate1: "",
          content: "",
        },
        modal: false,
        subLoading: false,
        pageOpts: [10, 15, 20, 30, 50], // 分页每页数量
        total: 0,
        allData: [],
        columns: [
          {
            title: '日期',
            key: 'run_date'
          },
          {
            title: '内容',
            key: 'content'
          },
          {
            title: '模式',
            key: 'run_type_str'
          },
          {
            title: '创建时间',
            key: 'created_at'
          },
          {
            title: '操作',
            slot: 'action',
            width: 150,
            align: 'center'
          }
        ],
        isEditId: "",
        isEditDate: "",
      }
    },
    created() {
      this._calendarReminderList()
    },
    methods: {
      deleteData(row) {
        this.$Modal.confirm({
          title: '删除提示',
          content: '<p>是否确认删除，删除后无法恢复</p>',
          onOk: () => {
            deleteCalendarReminder({ id: row.id }).then(res => {
              this.$Message.success('删除成功');
              this._calendarReminderList()
            })
          },
        });
      },
      changeRadio() {
        // if (this.modalStatus !== "编辑") {
        this.formBox.modDate = ''
        this.formBox.modDate1 = ''
        this.isEditDate = ""
        // }
      },
      editData(data) {
        this.modalStatus = "编辑"
        this.formBox.modResult = data.run_type_str
        this.formBox.content = data.content
        this.isEditId = data.id
        if (this.formBox.modResult === "循环") {
          this.formBox.modDate1 = data.run_date
          this.isEditDate = data.run_date
        } else {
          this.formBox.modDate = data.run_date
        }
        this.modal = true
      },
      changeDate(value) {
        this.formBox.modDate1 = value
        this.$refs.formBox.validateField('modDate')
      },
      submitParams() {
        this.$refs.formBox.validate((valid) => {
          if (valid) {
            let params = {
              run_type: this.formBox.modResult === "循环" ? 1 : 2,
              run_date: this.formBox.modResult === "循环" ? this.formBox.modDate1 : this.$Date(this.formBox.modDate).format("YYYY-MM-DD"),
              content: this.formBox.content
            }
            this.subLoading = true
            if (this.modalStatus === "编辑") {
              params.id = this.isEditId
            }
            let messageInfo = this.modalStatus === "编辑" ? '编辑成功' : "新增成功"
            SetCalendarReminder(params).then(res => {
              this.$Message.success(messageInfo);
              this.cancel()
              this._calendarReminderList()
            }).finally(() => {
              this.subLoading = false
            })
          }
        })
      },
      cancel() {
        this.modal = false
        if (this.$refs.dateViews) this.$refs.dateViews.reset()
        this.$refs.formBox.resetFields()
      },
      enterSearch() {
        this.pageParams.page = 1;
        this._calendarReminderList();
      },
      changePageSize(e) {
        this.pageParams.page = e;
        this._calendarReminderList();
      },
      /* @函数功能: 每页数量 */
      formChangePage(e) {
        this.pageParams.pageSize = e;
        this._calendarReminderList();
      },
      addData() {
        this.modalStatus = "新增"
        this.modal = true
      },
      _calendarReminderList() {
        let params = {
          keyword: this.keyWord,
          page: this.pageParams.page,
          pageSize: this.pageParams.pageSize,
        }
        calendarReminderList(params).then(res => {
          this.total = res.total
          this.allData = res.list
          // console.log(res)
        })
      }
    }
  }
</script>